<template>
  <a-spin style="width: 100%">
    <a-card class="general-card" :header-style="{ paddingBottom: '8px' }">
      <template #title>
        性别比例
      </template>
              <div id="main" style="width: 100%; height: 380px"  />
    </a-card>
  </a-spin>
</template>

<script  setup>
import * as echarts from 'echarts';
import {ref} from "vue";
import {getGender} from "@/api/grid/visualization";


function initEcharts (data) {
  const chartDom = document.getElementById('main');
  const myChart = echarts.init(chartDom);
  const option  = {
    title: {
      text: '性别比例',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data:data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
}

const businessProportion = ref([])
const getBusinessProportion = async () => {
  const {code, data} = await getGender()
  if (code === 200) {
    initEcharts(data)
  }
}
getBusinessProportion()
</script>

<style scoped lang="less"></style>
